<template>
  <!-- 新增部门的弹层 -->
  <el-dialog :title="title" :visible="isShowDialog" @close="onClose">
    <!-- 表单组件  el-form   label-width设置label的宽度   -->
    <!-- 匿名插槽 -->
    <el-form ref="deptForm" label-width="120px" :model="formData" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="formData.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="formData.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="formData.manager" :loading="loading" loading-text="加载中，请稍等" style="width:80%" placeholder="请选择" @focus="initGetEmployeesSimpleList">
          <!-- label 显示的值  value 存储的值 -->
          <el-option
            v-for="item in peoples"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="formData.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <el-row slot="footer" type="flex" justify="center">
      <!-- 列被分为24 -->
      <el-col :span="6">
        <el-button size="small" @click="onCancel">取消</el-button>
        <el-button type="primary" size="small" @click="onConfirm">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getDepartments, addDepartments, getDepartmentsById, editDepartments } from '@/api/departments'
import { getEmployeesSimpleList } from '@/api/employees'

export default {
  name: 'AddDepartment',
  components: {},
  props: {
    isShowDialog: { // 用来控制窗体是否显示或者隐藏
      type: Boolean,
      default: false
    },
    treeNode: { // 当前操作的节点 鼠标点击的部门信息
      type: Object,
      default: () => ({}) // Prop 'treeNode' requires default value to be set  vue/require-default-prop 报错原因"default 拼写错误"
      // required: false
    },
    title: {
      type: String,
      default: '新增部门'
    }
    // deptPeople: {
    //   type: Array,
    //   required: true
    // },
  },
  data() {
    // 校验部门名称是否重复 （同级）
    var validateNameRepeat = async(rule, value, callback) => {
      // value 就是部门名称  去找 同级部门下 是否有重复的部门名称
      // 先要获取最新的组织架构数据
      const { depts } = await getDepartments()
      // depts是所有的部门数据
      // 区分在不同场景下的校验规则
      let isRepeat = false
      if (this.formData.id) { // 如果存在 id 证明是在编辑场景下
        // 编辑部门时 修改后的部门名称不能和同级部门的名称重复
        // 1、先过滤出要修改的部门的所有同级部门,并且不能包括自己当前要修改的这个部门
        // 2、要修改的部门名称是否和同级部门的名称重复
        isRepeat = depts.filter(item => item.pid === this.formData.pid && item.id !== this.formData.id).some(item => item.name === value)
        console.log(isRepeat, value)
      } else { // id不存在 就是在 新增 场景下
      // 关键在如何去找同级部门的所有子部门 filter(item => item.pid === this.treeNode.id)
        isRepeat = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
      }
      // debugger
      // 如果 isReapeat 为 true 代表找到了有相同名字的部门 那么就提示错误信息 否则就校验通过
      isRepeat ? callback(new Error(`同级部门下已经有${value}的部门了`)) : callback()
    }
    // 校验部门编码是否重复 （整个模块都不允许重复）
    var validateCodeRepeat = async(rule, value, callback) => {
      // value 是部门编码 去找整个模块下是否有重复的编码
      // 先要获取最新的组织架构数据
      const { depts } = await getDepartments()
      let isRepeat = false
      if (this.formData.id) { // 有 id 就是编辑模式
      //
        isRepeat = depts.filter(item => item.id !== this.formData.id).some(item => item.code === value && value)
      } else { // 没 id 就是新增模式
        // 这里考虑数据库有可能没有给 code 设置值 也就是历史数据中可能没有 code 所以加了一个强制性条件 就是 value 值不为空 value
        isRepeat = depts.some(item => item.code === value && value) // 这里加一个 value不为空 因为我们的部门有可能没有code
      }
      isRepeat ? callback(new Error(`组织架构中已经有部门使用${value}编码`)) : callback()
    }
    return {
      formData: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      },
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
          { validator: validateNameRepeat, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
          { validator: validateCodeRepeat, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '部门介绍要求1-50个字符', trigger: 'blur' }
        ]
      },
      peoples: [],
      loading: false // 加载状态
    }
  },
  computed: {},
  methods: {
    // 初始化获取员工简单列表请求的函数
    async initGetEmployeesSimpleList() {
      this.loading = true
      const res = await getEmployeesSimpleList()
      // console.log(res)
      this.peoples = res
      this.loading = false
    },
    onConfirm() {
      // 点击确定后 如果表单整体校验通过就提交表单数据
      this.$refs.deptForm.validate(async isOk => {
        if (isOk) {
          // 验证通过后需要判断确定按钮是编辑还是新增
          if (this.formData.id) { // 如果表单数据中有 id 就发起编辑部门请求
            await editDepartments(this.formData)
          } else { // 否则就发起添加部门的请求
            const data = { ...this.formData, pid: this.treeNode.id }
            await addDepartments(data)
          }
          // 通知父组件更新视图
          this.$emit('updateDepts')
          // 通过 .sync 修饰符关闭弹层 update:固定写法 (update:props名称, 值)
          this.$emit('update:isShowDialog', false)
          // 清空表单内容
          // this.formData = {}
        }
      })
    },
    onCancel() {
      // 点击取消按钮
      // 关闭添加部门弹层
      this.$emit('update:isShowDialog', false)
      // 清空并重置所有验证规则
      this.$refs.deptForm.resetFields()
    },
    onClose() {
      // 点击关闭按钮关闭弹出层 通过监听el-ui自带的 @close 触发取消按钮事件来实现
      this.onCancel()
    },
    // 初始化获取部门详情请求的函数 实现编辑窗口下的数据回显
    async initGetDepartmentsById(id) {
      // this.formData = await getDepartmentsById(this.treeNode.id) // 因为props传值是异步的 treeNode 是从父组件传过来的 所以这里的this.treeNode.id有可能无法获取到
      // 解决方法：通过ref获取组件的实例后 在父组件中调用这个方法 来发起请求获取数据
      this.formData = await getDepartmentsById(id)
    }
  }
}
</script>

<style scoped lang="less">

</style>
